<template>
  <div class="info-panel">
    <div class="panel-section">
      <div class="section-header">
        <h3>任务监控</h3>
        <button class="section-close" @click.stop="emit('close')">✖</button>
      </div>
      <div ref="chartRef" class="monitor-chart"></div>
      <el-table
        :data="props.taskList"
        style="width: 100%"
        highlight-current-row
        :row-class-name="props.getTaskRowClassName"
        @row-click="handleRowClick"
        size="mini"
      >
        <el-table-column
          prop="name"
          label="任务名称"
          width="90"
          show-overflow-tooltip
        />
        <el-table-column prop="droneId" label="无人机ID" width="90" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="props.getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度">
          <template #default="scope">
            <el-progress :percentage="scope.row.progress" :stroke-width="6" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  defineEmits,
  defineProps,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
} from "vue";
import * as echarts from "echarts";

const props = defineProps({
  taskList: {
    type: Array,
    required: true,
  },
  getStatusType: {
    type: Function,
    required: true,
  },
  getTaskRowClassName: {
    type: Function,
    required: true,
  },
});

const emit = defineEmits(["row-click", "close"]);

const handleRowClick = (row) => {
  emit("row-click", row);
};

const chartRef = ref(null);
let chartInstance = null;

const progressSeries = computed(() => {
  const list = Array.isArray(props.taskList) ? props.taskList : [];
  return list.map((task, index) => ({
    label: task?.name || `任务${index + 1}`,
    value: Number(task?.progress) || 0,
  }));
});

const buildOption = () => {
  const labels = progressSeries.value.map((item) => item.label);
  const values = progressSeries.value.map((item) => item.value);
  return {
    grid: {
      left: 10,
      right: 14,
      top: 26,
      bottom: 10,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(17, 24, 39, 0.92)",
      borderColor: "rgba(96, 165, 250, 0.35)",
      textStyle: { color: "#e5e7eb" },
      formatter(params) {
        if (!params?.length) return "";
        const [{ name, value }] = params;
        return `${name}：${value}%`;
      },
    },
    xAxis: {
      type: "category",
      data: labels,
      axisLabel: {
        color: "#cbd5f5",
        fontSize: 12,
        interval: 0,
        formatter(value) {
          return value.length > 4 ? `${value.slice(0, 3)}…` : value;
        },
      },
      axisLine: {
        lineStyle: { color: "rgba(148, 163, 184, 0.35)" },
      },
      axisTick: { show: false },
    },
    yAxis: {
      type: "value",
      max: 100,
      min: 0,
      axisLabel: { color: "#94a3b8", fontSize: 12, formatter: "{value}%" },
      splitLine: {
        lineStyle: { color: "rgba(148, 163, 184, 0.18)" },
      },
    },
    series: [
      {
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        data: values,
        lineStyle: {
          width: 3,
          color: "rgba(96, 165, 250, 0.85)",
        },
        itemStyle: {
          color: "#60a5fa",
          borderColor: "#1d4ed8",
          borderWidth: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(96, 165, 250, 0.35)" },
            { offset: 1, color: "rgba(37, 99, 235, 0.05)" },
          ]),
        },
      },
    ],
  };
};

const renderChart = () => {
  if (!chartRef.value) return;
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }
  chartInstance.setOption(buildOption());
};

const handleResize = () => {
  chartInstance?.resize();
};

onMounted(() => {
  nextTick(() => {
    renderChart();
    window.addEventListener("resize", handleResize);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});

watch(
  () => props.taskList,
  () => {
    nextTick(renderChart);
  },
  { deep: true }
);
</script>

<style scoped>
.monitor-chart {
  height: 200px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(28, 36, 52, 0.72);
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12);
  margin-bottom: 12px;
  overflow: hidden;
}
.section-close {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.section-close:hover {
  color: #e5e7eb;
}
</style>
